<template>
  <div>
    <el-container class="search-container">
      <el-input
          v-model="searchTxt"
          type="text"
          placeholder="输入用户名搜索"
          size="default"
          style="width: 15%; margin-right: 10px"
          @change="search"
          clearable
      ></el-input>
      <el-button @click="search" size="default" type="primary" :disabled="searchTxt.trim().length===0">搜索</el-button>
    </el-container>
    <el-table
        :data="tableData.slice((currentPage-1)*pageSize, currentPage*pageSize)"
        stripe
        height="450"
        style="width: 100%">
      <el-table-column
          prop="uid"
          label="用户名ID"
          :width="80">
      </el-table-column>
      <el-table-column
          prop="username"
          label="用户名"
          :width="150">
      </el-table-column>
      <el-table-column
          prop="imageName"
          label="图片链接"
          :width="450"
          align="center"
      >
        <template #default="scope">
          <el-link :href="baseUrl + scope.row.imageName">{{scope.row.imageName}}</el-link>
        </template>
      </el-table-column>

      <el-table-column
          prop="predictResult"
          label="预测结果"
          :width="200"
          align="center"
      >
      </el-table-column>

      <el-table-column
          prop="addDate"
          label="上传时间"
          :width="250"
          align="center"
      >
      </el-table-column>

      <el-table-column property="delete" label="删除" align="center">
        <template #default="scope">
          <el-button
              size="small"
              type="danger"
              @click="deleteUserInfo(scope.$index, scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>


    </el-table>
    <el-pagination
        background layout="prev, pager, next"
        style="width:50%; margin-left: 35%; margin-top: 5px"
        :total="totalInfo"
        v-model:page-size="pageSize"
        v-model:current-page="currentPage"
    />
  </div>
</template>

<script setup>
import {onBeforeMount, ref} from "vue";
import request from "@/utils/request";
import {ElMessage, ElMessageBox} from "element-plus";

let baseUrl = "http://localhost:8090/images/"
//搜索框文字
let searchTxt=ref('')
//表格数据
let tableData=ref([])
//暂存数据，用于搜索
let tempData=ref([])
//分页数据
let totalInfo = ref(100)
let pageSize = ref(10)
let currentPage = ref(1)


onBeforeMount(()=>{
  request.get('http://localhost:8090/admin/getAllUploadInfo')
      .then((res)=>{
        tableData.value = res.data.data;
        totalInfo.value = tableData.value.length
        tempData.value=tableData.value
      })
      .catch((err)=>{
        console.log(err)
      })
})
//搜索
function search(){
  if(searchTxt.value.trim().length===0) {
    tableData.value=tempData.value
    return;
  }

  tableData.value=tableData.value.filter((uploadInfo)=>{
    return uploadInfo.username.includes(searchTxt.value);
  })
}

//删除用户信息
function deleteUserInfo(index, row) {
  ElMessageBox.confirm(
      '您确定要删除用户信息吗？',
      '警告',
      {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        let formData = new FormData()
        formData.append("imageName",row.imageName)
        request.post("http://localhost:8090/admin/deleteUploadInfoByImageName",formData,{
          headers: {'Content-Type': "multipart/form-data, charset=UTF-8"}
        })
            .then(res => {
              if(res.data.code===200){
                tableData.value = res.data.data;
                totalInfo.value  = tableData.value.length
                tempData.value = tableData.value
                ElMessage({
                  type: 'success',
                  message: '删除成功',
                })
              }
              else{
                ElMessage({
                  type: 'error',
                  message: '删除失败',
                })
              }

            })
            .catch(err => {

            })

      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消删除',
        })
      })

}


</script>

<style scoped>
.search-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  margin-bottom: 5px;
}
</style>
